<template>
    <!-- 资产管理列表 -->
	<s-layout id="layout" :tabbarshow="false" navbar="normal" :title="state.title" :autoBack="true" leftIconColor="#333" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
		<view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/zichanguanli_bg@2.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
			<!-- 搜索框 -->
			<view class="SearchBox">
				<s-search-keyword :placeholder="'搜索资产分类'" @searchKeyWord="searchKeyWord"></s-search-keyword>
			</view>
			<scroll-view ref="scroll" scroll-y class="list_bottom">
				
                <view v-for="(item,index) of  kind_item" :key="index">
                    <view class="every_kind" @tap="view_list(item.id)">
                        <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/banciguanli_icon_File${index + 1}@2.png`" mode="scaleToFill"/></view>
                        <view class="category">{{ item.title }}</view>
                    </view>
                </view>

			</scroll-view>
			<!-- <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty> -->
		</view>
	</s-layout>
</template>

<script setup>
	import { ref,computed  } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import { baseUrl } from '@/sheep/config';
	import { formatFileSize } from '@/utils/fn.js';
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const state =  ref({
		bgColor:'#fff',
		title:''
	})
    // const image_item = ref([              
    //     {
    //         value:0,
    //         image:'banciguanli_icon_File1@2.png'
    //     },
    //     {
    //         value:1,
    //         image:'banciguanli_icon_File2@2.png'
    //     },
    //     {
    //         value:2,
    //         image:'banciguanli_icon_File3@2.png'
    //     },
    // ])

    const kind_item = ref([])

    onLoad(() => {
        getAssetIndexList()
    })

    const Search_value = ref('')
    const searchKeyWord = (e) => {
        Search_value.value = e
        kind_item.value = []
        getAssetIndexList()
    }

    const getAssetIndexList = async () => {
        let params = {
            filter: JSON.stringify({
                title:Search_value.value
            }),
            op: JSON.stringify({
                title: 'LIKE'
            }),
        }
        const { data } = await sheep.$api.asset.getAssetIndexList(params);
        kind_item.value = data
    }

    // 跳转页面
    const view_list = (id) => {
        sheep.$router.go('/subpackage/staff/workbench/assets_management/assets_management', {
            id:id
        });
    }

</script>

<style lang="scss" scoped>
	.app {
        width: 100%;
        height: auto;
    }

    ::v-deep .uni-popup__wrapper {
        flex: 1;
        width: 100vw !important;
    }

    .content {
        padding: 80rpx 40rpx 10rpx 40rpx;
        box-sizing: border-box;
        // height: 540rpx;
        width: 100%;

    .title {
        color: rgb(84, 119, 255);
        font-size: $uni-font-size-base;
        background-color: rgb(246, 248, 255);
        text-align: center;
        padding: 20rpx;
        border-radius: 10rpx;
    }

    .center {
        border-bottom: 1px solid #e5e5e5;
    }

    .text {
        color: rgb(153, 153, 153);
        font-size: $uni-font-size-base;
    }

    .bottom {
        display: flex;
        justify-content: space-between;
    }

    .btnArr {
        display: flex;
    }
    }

    .flex {
        display: flex;
    }

    .box_view {
        display: flex;

    image {
        width: 50rpx;
        height: 50rpx;
        margin-left: 10rpx;
        margin-top: 10rpx;
    }
    }

    .list_bottom {
        width: calc(100% - 40rpx);
        height: 68vh;
        margin: 0 auto;
        border-radius: 20rpx;
        background-color: raba(0,0,0,0);
    }

    // 搜索框
    .SearchBox {
        width: calc(100% - 40rpx);
        height: 72rpx;
        margin: 240rpx auto 20rpx auto;
    }

    // 弹出框
    .popup_box {
        width: 100%;
        height: 50%;
        background-color: $uni-bg-color;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;
        text-align: center;

        .title {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            background: #efefef;
            color: #333;
            font-size: $uni-font-size-base;
            border-top-right-radius: 30rpx;
            border-top-left-radius: 30rpx;
        }

        .name {
            width: 100%;
            height: 18vh;

            .list {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                background-color: $uni-bg-color;
                color: #666;
                font-size: 26rpx;
            }

            .list_loading {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                color: #999;
                font-size: 26rpx;
                background-color: $uni-bg-color;
                border-top: 1rpx solid #efefef;
            }
        }
    }

    .loading-text {
        text-align: center;
        font-size: $uni-font-size-base;
        color: #666;
        padding: 20rpx 0;
    }

    scroll-view ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
    page {
        width: 100%;
        height: 100%;
    }

    #app {
        background-size: 100%;
        width: 100%;
        min-height: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    :deep(.u-icon__icon) {
        background: #ffffff;
        width: 64rpx;
        height: 64rpx;
        justify-content: center;
        border-radius: 50%;
    }

    // 分类选项
    .every_kind {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        .image {
            width: 70rpx;
            height: 70rpx;
            margin-right: 30rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .category {
            font-family: PingFangSC;
            color: #333333;
            font-weight: 550;
            font-size: 28rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
    }
</style>